<template>
  <div>
    <van-list
      v-if="filmsList.length > 0"
      v-model="loading"
      :finished="finished"
      finished-text="我是有底线的"
      :immediate-check="false"
      @load="onLoad"
    >
      <van-cell
        v-for="film in filmsList"
        :key="film.filmId"
        @click="handelDetail(film.filmId)"
      >
        <img :src="film.poster" alt="" />
        <div class="film_content">
          <div class="title">
            {{ film.name }}<span>{{ film.filmType.name }}</span>
          </div>
          <div :class="film.grade ? 'grade' : 'hidden'">
            观众评分<span>{{ film.grade }}</span>
          </div>
          <div class="actors">
            主演：<span>{{ film.actors | actorsFilter }}</span>
          </div>
          <div class="nation_runtime">
            {{ film.nation }} | {{ film.runtime }}分钟
          </div>
        </div>
        <div class="btn" @click.stop="handleFilmCinemas(film.filmId)">购票</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import http from "@/utils/http";
import Vue from "vue";
import { mapState } from "vuex";

Vue.filter("actorsFilter", (data) => {
  if (data === undefined) return "暂无主演";
  return data.map((item) => item.name).join(" ");
});

export default {
  components: {},
  data() {
    return {
      filmsList: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0,
    };
  },
  computed: {
    ...mapState("city", ["cityId", "cityName"]),
  },
  created() {},
  mounted() {
    http({
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=3178093`,
      headers: {
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((response) => {
      // console.log(response.data)
      this.filmsList = response.data.data.films;
      this.total = response.data.data.total;
    });
  },
  methods: {
    handleFilmCinemas(filmId) {
      this.$router.push(`/film/${filmId}/cinemas`);
    },
    handelDetail(filmId) {
      // 1-通过路径跳转
      // this.$router.push(`/detail/${filmId}`)

      // 2-通过命名路由跳转
      this.$router.push({
        name: "detail",
        params: {
          filmId: filmId,
          from: "nowplaying",
        },
      });
    },

    onLoad() {
      // console.log(this.filmsList.length)
      if (this.filmsList.length === this.total && this.total !== 0) {
        this.finished = true;
        return;
      }
      this.current++;
      http({
        url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3178093`,
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((response) => {
        // console.log(response.data)
        this.filmsList = [...this.filmsList, ...response.data.data.films];
        // 每次加载后loading要主动设置为false
        this.loading = false;
      });
      console.log("到底了");
    },
  },
};
</script>

<style scoped lang="scss">
.van-list {
  background-color: #fff;
}

.van-cell {
  padding: 15px;
}

.van-cell > div {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  img {
    width: 66px;
    height: 97px;
  }

  .film_content {
    flex: 1;
    padding: 0 10px;
    width: 210px;

    .title {
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        font-size: 12px;
        padding: 0 2px;
        color: #fff;
        background-color: #d2d6dc;
        margin-left: 5px;
        border-radius: 2px;
        position: relative;
        bottom: 2px;
      }
    }

    .grade {
      height: 21px;
      line-height: 21px;
      color: #797d82;
      font-size: 13px;

      span {
        color: #ffb232;
        font-size: 14px;
        margin-left: 3px;
      }
    }

    .actors {
      color: #797d82;
      font-size: 13px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nation_runtime {
      color: #797d82;
      font-size: 13px;
      margin-top: 5px;
    }
  }

  .btn {
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #ff5f16;
    border: 1px solid #ff5f16;
    border-radius: 3px;
    text-align: center;
  }

  .btn:active {
    color: #fff;
    background-color: #ff5f16;
  }
}

.hidden {
  visibility: hidden; // 没有东西是会占位显示空白，用display:none不会占位
}
</style>
